<template>
  <div class="imgClass-item">
    <div class="title">{{title}}</div>
    <div class="body">
      <el-image :src="iFimg" fit="contain" class="imgs" :preview-src-list="list">
        <div v-if="!ifag" slot="error" style="color:#F56C6C;">没上传</div>
        <div v-else slot="error"></div>
      </el-image>
    </div>
    <div class="footers">
      <el-button type="primary" size="small" @click="getIfrname">拍照</el-button>
      <el-upload
        style="margin-left: 10px"
        :action="$http.defaults.baseURL + 'upload'"
        :headers="token"
        :show-file-list="false"
        :on-success="handImgSuccess"
        :limit="limit"
        :multiple="limit>1"
      >
        <el-button plain type="primary" size="small">上传</el-button>
      </el-upload>
    </div>
  </div>
</template>

<script>
import { dataURLtoBlob, blobToFile } from "../unit";
export default {
  // props: ["title", "img", "ifag", "iframeRef","more"],
  props: {
    title: {
      type: String,
      default: ""
    },
    imgArr: {
      type: Array,
      default: () => []
    },
    ifag: {
      type: Boolean,
      default: false
    },
    iframeRef: {
      type: Element
    },
    limit: {
      type: Number,
      default: 1
    },
    value: String
  },
  data() {
    return {
      iFimg: "",
      list: [],
      token: { Authorization: `Bearer ${sessionStorage.getItem("token")}` }
    };
  },
  created() {
    this.iFimg = this.limit > 1 ? "" : this.value;
    this.list = this.limit > 1 ? this.imgArr : [this.value];
  },
  methods: {
    // 获取照片
    async getIfrname() {
      // var iframe = this.$refs.iframe;
      var iwindow = this.iframeRef.contentWindow;
      iwindow.capImg();
      var idoc = iwindow.document;
      var canvas = idoc.getElementById("cameraCanvas");
      // console.log("can", canvas); //获取body
      var src = canvas.toDataURL("image/png");
      var blob = dataURLtoBlob(src);
      var file = blobToFile(blob);
      let forms = new FormData();
      forms.append("file", file);
      let img = await this.$http.post("upload", forms);
      this.handImgSuccess(img.data)
    },
    handImgSuccess(res) {
      if (this.limit > 1) {
        this.imgArr.push(res.url);
        // 用sync,不用$emit
        // this.$emit("imgChange", this.imgArr);
      } else {
        //用v-model 要用input，后面跟随返回的值
        this.$emit("input", res.url);
      }
      this.iFimg = res.url;
    }
  },
  watch: {
    imgArr(newValue) {
      try {
        this.iFimg = newValue[0];
      } catch (error) {
        console.log("err", error);
      }
      this.list = newValue;
    },
    value(newValue) {
      this.iFimg = newValue;
      this.list = [newValue];
    }
  }
};
</script>

<style lang="scss" scope>
.imgClass-item {
  width: 250px;
  height: 250px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  font-size: 14px;
  margin-right: 20px;
  float: left;
  .title,
  .footers {
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    background-color: #409eff;
  }
  .body {
    height: 170px;
    .imgs {
      width: 100%;
      height: 100%;
    }
  }
  .footers {
    background-color: #ebeef5;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: inherit;
  }
}
</style>